<template>
  <div class="my-logs">
    <div class="my-log-item" v-for="(item,index) in logs" :key="index">
      <div class="my-log-time">
        <img :src="item.img" alt />
        <span>{{item.time}}</span>
      </div>
      <div class="my-log-text">
        <p v-for="(text,textIndex) in item.text" :key="textIndex">{{text.content}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      icons: [
        { url: "http://data.youxiu.info/yidianBook/icon/crops.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/delivery.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/dipper.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/egg.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/farm.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/farmer.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/food-basket.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/Insecticide.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/land.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/lotus.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/pest.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/radish.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/rainbow.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/rainfall.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/rice.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/snack.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/sunflower.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/tea-set.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/tomato.png" },
        { url: "http://data.youxiu.info/yidianBook/icon/tree.png" }
      ],
      logs: [
        {
          img: "",
          time: "2020年6月7日",
          text: [
            {
              content: "暂停了一段时间，接着开发"
            }
          ]
        },
        {
          img: "",
          time: "2020年4月15日",
          text: [
            {
              content: "接口联调测试，图书原型图简单绘制"
            }
          ]
        },
        {
          img: "",
          time: "2020年4月15日",
          text: [
            {
              content: "首页 画报组件 Pictorial"
            },
            {
              content: "我的图书 上拉加载更多 分页显示  背景图片延迟bug"
            },
            {
              content: "我的图书  增加长按删除功能"
            },
            {
              content: "我的图书  删除功能  增加振动提示"
            }
          ]
        },
        {
          img: "",
          time: "2020年4月13日",
          text: [
            {
              content: "建行项目验证配合测试，bug解决，市监局和H5事项"
            },
            {
              content: "项目重新打包扫描"
            },
            {
              content: "前端面试整理"
            }
          ]
        },
        {
          img: "",
          time: "2020年4月12日",
          text: [
            {
              content:
                "打包台式机准备维修，最后在家休，重新安装又没出问题，日了"
            },
            {
              content: "商城小程序远程解决bug"
            },
            {
              content:
                "台式机环境搭建，出了个小问题，上网查貌似只有作者能知道是什么问题，删除了所有安装包在安装就好用了。"
            },
            {
              content:
                "图书管理小程序使用git版本管理每天开发，台式机项目克隆代码，运行都正常"
            }
          ]
        },
        {
          img: "",
          time: "2020年4月11日",
          text: [
            {
              content: "我的图书 增加下拉刷新和样式调整  限制每页9条数据 "
            },
            {
              content: "我的图书 所有 列表加载显示 "
            },
            {
              content: "我的图书  动态banner 和 文字 "
            },
            {
              content: "图书 navBar 组件编写"
            },
            {
              content: "商城小程序，分类页面和购物车登录bug解决"
            },
            {
              content: "返回大成广场项目测试bug解决"
            },
            {
              content: "早八点，洋桥项目上线验证"
            }
          ]
        },
        {
          img: "",
          time: "2020年4月10日",
          text: [
            {
              content: "我的图书 页面 原型图 绘制"
            },
            {
              content:
                "解决 登录按钮  @getuserinfo='login' open-type='getUserInfo' 调用用户弹出，拒绝时 弹出提示成功 "
            },
            {
              content: "个人登录按钮 点击区域 增加用户体验"
            },
            {
              content: "我的图书 页面跳转 传值问题"
            }
          ]
        },
        {
          img: "",
          time: "2020年4月9日",
          text: [
            {
              content: "修复扫码添加图书，等待不提示错误"
            },
            {
              content: "增加扫码添加图书，等待提示，和成功提示"
            },
            {
              content: "个人中心页面，微调整"
            },
            {
              content: "新增log更新日志页面"
            }
          ]
        },
        {
          img: "",
          time: "2020年4月3日",
          text: [
            {
              content: "统计 今年 剩余多少天"
            },
            {
              content: "云函数 获取豆瓣图书详细信息"
            },
            {
              content: "首页展示图书列表"
            }
          ]
        },
        {
          img: "",
          time: "2020年4月2日",
          text: [
            {
              content: "云开发项目构建，搭建本地环境"
            },
            {
              content: "云函数访问登录获取openid"
            }
          ]
        },
        {
          img: "",
          time: "2020年4月1日",
          text: [
            {
              content: "愚人节开始搭建的项目，呵呵"
            }
          ]
        }
      ]
    };
  },
  mounted() {
    this.getIcon();
  },
  methods: {
    /**
     * 动态获取 icon 图标地址
     */
    getIcon() {
      // var num = Math.ceil(Math.random() * this.icons.length);
      this.logs.forEach(
        v =>
          (v.img = this.icons[Math.ceil(Math.random() * this.icons.length)].url)
      );
    }
  }
};
</script>

<style>
.my-logs {
  padding-bottom: 100px;
}
.my-log-item {
  padding-bottom: 15px;
}
.my-log-time {
  padding: 10px 10px 0;
  height: 36px;
  padding-bottom: 5px;
}
.my-log-time img {
  width: 36px;
  height: 36px;
  margin-right: 5px;
}
.my-log-time span {
  line-height: 36px;
  font-weight: bold;
  position: relative;
  top: -12px;
}
.my-log-text {
  border-left: 1px solid #e5e5e5;
  margin: 0 25px;
  padding-left: 25px;
  /* padding-bottom: 5px; */
  font-size: 12px;
  color: #666666;
}
.my-log-text p {
  line-height: 30px;
}
